<template>
  <div class="file_card_box">
    <div
        class="file_card"
        v-for="(item, index) in $store.state.file.recycleList"
        :key="index"
    >
      <div class="card">
        <!--        <div-->
        <!--          class="card_action_btn card_action_left"-->
        <!--        >-->
        <!--          <input type="checkbox"/>-->
        <!--        </div>-->
        <div
            class="card_action_btn card_action_right"
            @click.stop="handlerMenu(index)"
        >
          <span class="card_action_list">···</span>
        </div>
        <div class="context_click_menu" v-if="showFileMenu === index">
          <ul class="context_dropdown_menu">
            <li class="context_dropdown_menu_item" @click.stop="removetob(item)">
              <div class="context_dropdown_menu_item_text">恢复至备份盘</div>
            </li>
            <li class="context_dropdown_menu_item" @click.stop="removeto(item)">
              <div class="context_dropdown_menu_item_text">恢复至资源库</div>
            </li>
            <li
                style="
                background-color: rgb(132, 133, 141, 0.08);
                height: 1px;
                margin: 4px 8px;
              "
            ></li>
            <li class="context_dropdown_menu_item warn" @click.stop="deleteOpen(item)">
              <div class="context_dropdown_menu_item_text warn1">
                删除
              </div>
            </li>
          </ul>
        </div>
        <div
            class="node_card"
            @mouseover="showButtons = true"
            @mouseout="showButtons = false"
        >
          <div class="folder_cover">
            <img
                v-if="item.type === 'jpg' || item.type === 'png'"
                style="width: 115px; height: 90px"
                :src="item.fileUrl"
                alt=""
            />
            <img
                v-else
                style="width: 115px; height: 90px"
                :src="typeList[item.type]"
                alt=""
            />
          </div>
          <div class="card_text">
            <p class="card_title">{{ item.name }}</p>
            <p class="card_time">{{ item.deleteTime }}</p>
          </div>
        </div>
      </div>
    </div>

<!--    删除弹窗-->
    <el-dialog
        title="提示"
        :visible.sync="deleteflag"
        width="30%">
      <span style="color: red">您这一操作将永久删除，确定吗！！！</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="checkdelete()">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>

import { typeList } from "@/components/FileCard/icon.js";
import { mapMutations } from "vuex";
import {getFolder,removetozyk,removetobfp,deleteByid} from "@/api/recycle";

export default {
  name: "FileCardList",
  data() {
    return {
      item: null,
      showButtons: false,
      showFileMenu: undefined,
      showMenuF: false,
      FolderList: [],
      imageUrl: "",
      dialogVisible: false,
      renameDialog: false,
      form: {},
      viewUrl: "",
      typeList,
      /** 移动相关**/
      removeFlag: false,
      title: "",
      folderList: [],
      defaultProps: {
        children: "childer",
        label: "name",
      },
      beforeId: null,
      afterId: null,
      xxflag: false,
      xxinfo: {},
      downflog:false,
      downloadp:'D:/doc/clouddisk',
      downloadid: null,
      downloadFileUrl: null,
      dtype: null,
      deleteflag: false,
      deleteId: null,
    };
  },
  props: ["showMenu"],
  created() {
    this.showMenuF = this.showMenu;
    this.getFolderList()
  },
  computed: {

  },
  methods: {
    ...mapMutations("file", [
      "pushResource",
      "pushFolderList",
      "deleteFolderList",
      "deleteResource",
      "deleteResourceList",
      "pushResourceList",
        "pushRecycleList",
        "deleteRecycleList"
    ]),
    /**
     * 获取资源库集合
     */
    getFolderList() {
      getFolder(0).then((res) => {
        console.log(res);
        this.deleteRecycleList();
        for (let item of res.data) {
          this.pushRecycleList(item);
        }
        console.log("da",res.data)
        this.folderList = this.$store.state.file.recycleList;
      });
    },
    // 恢复至资源库
    removeto(item){
      removetozyk(item.id).then(res => {
        if (res.code === 200){
          this.$message.success("成功恢复到资源库")
        }
      })
    },
    // 恢复至备份盘
    removetob(item){
      console.log("aa")
      removetobfp(item.id).then(res => {
        if (res.code === 200){
          this.$message.success("成功恢复到备份盘")
        }
      })
    },
    // 删除操作
    deleteOpen(item){
      this.deleteflag = true
      this.deleteId = item.id
    },
    checkdelete(){
      deleteByid(this.deleteId).then(res => {
        if (res.code === 200){
          this.$message.success("删除成功")
          this.deleteflag = false
        }
      })
    },

    handlerMenu(index) {
      console.log("-----------handlerMenu-----------", index);
      this.showFileMenu = index;
    },
    // 点击空白处隐藏菜单
    handleRootClick() {
      this.showFileMenu = undefined;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
          .then((_) => {
            done();
          })
          .catch((_) => {
          });
    },
  },



  watch: {},
  mounted() {
    // 获取根元素的DOM节点
    const rootElement = document.querySelector(".app-wrapper");

    // 添加click事件监听器
    rootElement.addEventListener("click", this.handleRootClick);
  },
  beforeDestroy() {
    // 在组件销毁前移除事件监听器，以避免内存泄漏
    const rootElement = document.querySelector(".app-wrapper");
    rootElement.removeEventListener("click", this.handleRootClick);
  },
};
</script>

<style lang="scss" scoped>
.el-dialog-div {
  //margin-top: 10px;
  height: 75vh; //如果高度过高，可用max-height
  overflow: auto;
}

.file_card_box {
  display: flex;
  flex-wrap: wrap;

  .file_card {
    width: 155px;
    height: 207px;
    display: flex;
    justify-content: center;

    .card {
      width: 123px;
      position: relative;

      .node_card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        border-radius: 10px;
        padding: 8px 0 10px;

        &:hover {
          background-color: rgb(132, 133, 141, 0.08);
        }

        .folder_cover {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 12px;
        }

        .card_text {
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          p {
            width: 100%;
            text-align: center;
          }

          .card_title {
            font-size: 14px;
            color: rgb(37, 38, 43);
            line-height: 1.5;
            margin: 0;
            margin-bottom: 2px;
            text-overflow: ellipsis;
            overflow: hidden;
          }

          .card_time {
            font-size: 12px;
            color: rgb(37, 38, 43, 0.36);
            margin: 0;
          }
        }
      }

      .card_action_btn {
        width: 24px;
        height: 24px;
        border-radius: 3px;
        background-color: #fff;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;

        .card_action_list {
          font-weight: 500;
          line-height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgb(37, 38, 43, 0.36);
        }

        //&:hover {
        //  color: rgba(10, 10, 10);
        //}
      }

      .card_action_btn.hidden {
        display: none;
      }

      .card_action_left {
        position: absolute;
        top: 4px;
        left: 4px;
        z-index: 2;
      }

      .context_click_menu {
        width: 160px;
        padding: 4px;
        background-color: #fff;
        position: absolute;
        top: 34px;
        left: 96px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        z-index: 100;

        .context_dropdown_menu {
          width: 152px;
          list-style: none;
          padding: 0;
          margin: 0;

          .context_dropdown_menu_item {
            display: flex;
            height: 36px;
            align-items: center;
            border-radius: 5px;
            width: 100%;

            .context_dropdown_menu_item_text {
              color: rgb(37, 38, 43);
              font-size: 14px;
              padding: 0 8px;
              font-family: Helvetica Neue, Helvetica, PingFang SC,
              Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
            }

            .context_dropdown_menu_item_text.warn1 {
              color: rgb(255, 111, 102);
            }
          }

          .context_dropdown_menu_item:hover {
            background-color: rgb(132, 133, 141, 0.08);
          }

          .context_dropdown_menu_item.warn:hover {
            background-color: rgb(243, 91, 81, 0.12);
          }
        }
      }

      .card_action_right {
        position: absolute;
        top: 4px;
        right: 4px;
        z-index: 2;
      }

      .node_card.active {
        background-color: rgb(132, 133, 141, 0.08);
      }
    }
  }
}
</style>
